<template>
  <el-dialog
    title="体温单数据录入"
    width="1400px"
    top="50px"
    :visible="visible"
    :close-on-click-modal="false"
    @close="close"
  >
    <div class="header flex flex-align-center">
      <span>床号：</span>
      <Select
        v-model="form.bedNumber"
        :data="bedOptions"
        :clearable="false"
        @handle="handleBed"
      />
      <el-button class="my-btn ml-auto" type="info" @click="close">
        取消
      </el-button>
      <el-button class="my-btn ml-10" type="primary" @click="save">
        保存
      </el-button>
    </div>
    <div v-if="search.patientIdent" class="box">
      <div>
        <el-button
          :disabled="selection.length == 0"
          type="error"
          class="my-btn mb-10"
          @click="handleDel"
        >
          删除
        </el-button>
        <Table
          ref="tableRef"
          selection
          stripe
          height="620px"
          method="get"
          url="/api/icu/temperature/record/times"
          :param="search"
          :columns="columns"
          highlight
          :checkSelectSet="checkSelectSet"
          @selection="handleSelect"
          @click="getInfo"
          @tableData="e => (tableData = e)"
        />
      </div>
      <div class="form">
        <div class="mb-10">
          <span>操作时间：</span>
          <DateSelection
            ref="DateSelectionRef"
            v-model="form.time"
            format="yyyy-MM-dd HH:mm"
            :simple-op="true"
            :date-picker-show="true"
            :date-show="true"
            :no-clear="true"
            style="display: inline-flex"
            @onchange="handleDate()"
          />
          <el-radio-group v-model="form.time" @change="handleDate">
            <el-radio
              v-for="(item, idx) in fixHour"
              :key="idx"
              :label="getQuickTimeNode(item)"
              :disabled="getQuickTimeNode(item) > +new Date()"
            >
              {{ item.toString().padStart(2, 0) }}
            </el-radio>
          </el-radio-group>
        </div>
        <p>体征</p>
        <div class="content pb-10">
          <span>体温：</span>
          <Select
            v-model="fixedContent.temperatureType"
            class="w-140 mb-10"
            url="api/icu/care/batch/clgj"
          />
          <el-input v-model="fixedContent.temperature" class="w-140 ml-10">
            <template slot="append">℃</template>
          </el-input>
          <span class="ml-40">心率：</span>
          <el-input v-model="fixedContent.heartRate" class="w-140">
            <template slot="append">次/分</template>
          </el-input>
          <span class="ml-40">呼吸：</span>
          <el-input v-model="fixedContent.breathe" class="w-140">
            <template slot="append">次/分</template>
          </el-input>
          <br />
          <span>血氧饱和度：</span>
          <el-input v-model="fixedContent.oxygenSaturation" class="w-140">
            <template slot="append">%</template>
          </el-input>
          <span class="ml-134">收缩压：</span>
          <el-input v-model="fixedContent.ibpS" class="w-140">
            <template slot="append">mmHg</template>
          </el-input>
          <span class="ml-26">舒张压：</span>
          <el-input v-model="fixedContent.ibpD" class="w-140">
            <template slot="append">mmHg</template>
          </el-input>
        </div>
        <p>入量</p>
        <div class="content">
          <template v-for="(_item, _idx) in 2">
            <div
              v-for="(item, idx) in _item == 1
                ? fixedContent.inIoRecords
                : changeContent.inIoRecords"
              :key="'i' + _idx + idx"
              class="inline-block"
            >
              <Select
                v-model="item.itemCode"
                class="w-140 mb-10"
                :data="inOptions"
                :disabled="item == 1"
              />
              <el-input
                v-model="item.medication"
                class="w-140 ml-10"
                :disabled="item == 1"
                placeholder="请输入名称"
              />
              <el-input-number
                v-model.trim="item.ioValue"
                class="w-140 ml-10"
                :step="1"
                :min="0"
                placeholder="请输入量"
                :controls="false"
                :disabled="item == 1"
              />
              <img
                v-show="_item == 2"
                :key="'i' + _idx"
                class="img"
                src="@/assets/images/del.png"
                @click="delArr('inIoRecords', idx)"
              />
            </div>
          </template>
          <img
            class="img add"
            src="@/assets/images/add.png"
            @click="addInOut('inIoRecords')"
          />
        </div>
        <p>出量</p>
        <div class="content">
          <template v-for="(_item, _idx) in 2">
            <div
              v-for="(item, idx) in _item == 1
                ? fixedContent.outIoRecords
                : changeContent.outIoRecords"
              :key="'o' + _idx + idx"
              class="inline-block"
            >
              <Select
                v-model="item.itemCode"
                class="w-140 mb-10"
                :data="outOptions"
                :disabled="item == 1"
              />
              <el-input-number
                v-model.trim="item.ioValue"
                class="w-105 ml-10"
                :step="1"
                :min="0"
                placeholder="请输入量"
                :controls="false"
                :disabled="item == 1"
              />
              <!-- 大便的额外值 -->
              <template v-if="item.itemCode == 'out_db'">
                <Select
                  v-model="item.out_db_isColoclyster"
                  class="w-105 ml-10"
                  dict="out_db_isColoclyster"
                  :disabled="item == 1"
                />
                <Select
                  v-model="item.out_db_isArtificial"
                  class="w-105 ml-10"
                  dict="out_db_isArtificial"
                  :disabled="item == 1"
                />
                <Select
                  v-model="item.out_db_isIncontinence"
                  class="w-105 ml-10"
                  dict="out_db_isIncontinence"
                  :disabled="item == 1"
                />
              </template>
              <!-- 胃内容物的额外值 -->
              <template v-if="item.itemCode == 'out_wnrw'">
                <Select
                  v-model="item.out_wnrw_color"
                  class="w-105 ml-10"
                  dict="out_wnrw_color"
                  filterable
                  allow-create
                  :disabled="item == 1"
                />
              </template>
              <Select
                v-model="item.nature"
                class="w-105 ml-10"
                :dict="getItemCode(item.itemCode)"
                filterable
                :disabled="item == 1"
              />
              <img
                v-show="_item == 2"
                :key="'o' + _idx"
                class="img"
                src="@/assets/images/del.png"
                @click="delArr('outIoRecords', idx)"
              />
            </div>
          </template>
          <img
            class="img add"
            src="@/assets/images/add.png"
            @click="addInOut('outIoRecords')"
          />
        </div>
        <p>其他</p>
        <div class="content">
          <span>疼痛强度：</span>
          <el-input v-model="fixedContent.painIntensity" class="w-140 mb-10">
            <template slot="append">分</template>
          </el-input>
          <span class="ml-40">体重：</span>
          <Select
            v-model="changeContent.weightType"
            class="w-105"
            dict="weight"
          />
          <el-input v-model="changeContent.weight" class="w-140 ml-10">
            <template slot="append">kg</template>
          </el-input>
          <span class="ml-40">身高：</span>
          <el-input v-model="changeContent.height" class="w-140">
            <template slot="append">cm</template>
          </el-input>
          <br />
          <div
            v-for="(item, idx) in changeContent.customOptions"
            :key="idx"
            class="inline-block"
            :class="idx > 0 && idx % 2 != 0 ? 'ml-10' : ''"
          >
            <el-input v-model="item.label" class="w-140 mb-10" />
            <span> : </span>
            <el-input v-model="item.value" class="w-140" />
            <img
              class="img"
              src="@/assets/images/del.png"
              @click="delArr('customOptions', idx)"
            />
          </div>
          <img
            class="img add"
            src="@/assets/images/add.png"
            @click="addCustom"
          />
          <br />
          <span>表顶注释：</span>
          <Select
            v-model="changeContent.events"
            class="w-700 mb-10"
            dict="temperature_event"
            filterable
            multiple
            allow-create
            :collapseTags="false"
          />
        </div>
      </div>
    </div>
  </el-dialog>
</template>
<script>
import {
  computed,
  defineComponent,
  nextTick,
  onMounted,
  reactive,
  toRefs,
  watch
} from 'vue'

import { getBedList } from '@/api/common/patient'
import { Doc } from '@/api/doc'
import { bind, unbind } from '@/api/manage/device'
import { batchObsRecord } from '@/api/nursing/observation'
import { Manage } from '@/api/nursing/operate'
import DateSelection from '@/components/DateSelection/indexV2.vue'
import Select from '@/components/MyComp/Select.vue'
import Table from '@/components/MyComp/Table.vue'
import { getElementFnFromInstance } from '@/utils/instance'
import { getStoreFromInstance } from '@/utils/instance'
const FixTemp = {
  temperatureTypeId: null, // 体温类型id
  temperatureType: null, //体温类型
  temperatureId: null, // 体温id
  temperature: null, // 体温
  heartRateId: null, // 心率id
  heartRate: null, // 心率
  breatheId: null, //呼吸id
  breathe: null, //呼吸
  oxygenSaturation: '', // 血氧饱和度
  ibpSId: null, // 收缩压id
  ibpS: null, // 收缩压
  ibpDId: null, // 舒张压id
  ibpD: null, // 舒张压
  inIoRecords: [], // 入量
  outIoRecords: [], // 出量
  painIntensity: null // 疼痛
}
const ChangeTemp = {
  inIoRecords: [], // 入量
  outIoRecords: [], // 出量
  weightType: null, // 体重类型
  oxygenSaturation: '', // 血氧饱和度
  painIntensity: null, // 疼痛
  weight: null, // 体重
  height: null, // 身高
  customOptions: [
    // 自定义项
    {
      label: '',
      value: ''
    }
  ],
  events: [] // 表顶注释
}
const inOutTemp = {
  ioId: 0,
  ioValue: 0,
  itemCode: '',
  itemName: '',
  modelCode: '',
  nature: '',
  medication: '',
  isType: 1,
  suNature: '',
  time: '',
  realTime: ''
}
const formTemp = {
  id: null,
  time: +new Date(), // 操作时间
  patientIdent: '',
  hospitalNumber: '',
  bedNumber: '',
  isDefaultTime: false // 是否系统生成的时间点
}
import { cloneDeep } from 'lodash-es'

import { formatTime } from '@/utils/format'
export default defineComponent({
  components: {
    Table,
    Select,
    DateSelection
  },
  props: {
    patCur: {
      type: Object,
      default: () => {}
    }
  },
  emits: ['refresh'],
  setup(props, { emit }) {
    const { $message } = getElementFnFromInstance()

    const state = reactive({
      visible: false,
      // 表格搜索条件
      search: {
        hospitalNumber: '',
        patientIdent: '',
        rkTime: '',
        ckTime: ''
      },
      columns: [
        {
          title: '时间点',
          key: 'time',
          align: 'center',
          width: 130,
          formatter: (row, column, cellValue) => {
            return formatTime(cellValue * 1, 'yyyy-MM-dd HH:mm')
          }
        },
        {
          title: '记录人员',
          key: 'updateName',
          align: 'center'
        }
      ],
      bedOptions: [], // 床位选项
      inOptions: [], // 入量选项
      outOptions: [], // 出量选项
      tableRef: {},
      DateSelectionRef: {},
      fixHour: [2, 6, 10, 14, 18, 22], // 由系统生成的时间点
      now: +new Date(), //当前日期
      selection: [], // 表格选中行
      // 病人基本参数
      form: Object.assign(cloneDeep(formTemp), {
        time: +new Date()
      }), // 额外的表单数据
      fixedContent: cloneDeep(FixTemp), // 固定数据
      changeContent: cloneDeep(ChangeTemp), // 可变数据
      tableData: [] // 表格数据
    })

    // 是否系统生成的记录
    function isFix(time = state.form.time) {
      const date = new Date(time)
      const HH = date.getHours()
      const mm = date.getMinutes()
      const ss = date.getSeconds()
      if (state.fixHour.includes(HH) && mm === 0 && ss === 0) {
        return true
      }
      return false
    }

    // 显示弹框
    function initData() {
      state.visible = true
      if (props.patCur) {
        const obj = state.bedOptions.find(
          res => res.value == props.patCur.bedNumber
        )
        // 默认选中当前病人
        handleBed(obj.value, '', obj)
      }
    }

    // 获取床位列表
    function getBedOptions() {
      getBedList().then(({ data }) => {
        const arr = []
        data.length > 1 &&
          data.map(res => {
            arr.push({
              label: `${res.bedNumber} ${res.patientName || ''}`,
              value: res.bedNumber,
              disabled: res.patientIdent ? false : true,
              content: {
                patientIdent: res.patientIdent,
                hospitalNumber: res.hospitalNumber,
                rkTime: res.rkTime,
                ckTime: res.ckTime
              }
            })
          })
        state.bedOptions = arr
      })
    }

    // 选择床位
    function handleBed(val, i, item) {
      const time = state.form.time
      state.form = {
        patientIdent: item.content.patientIdent,
        hospitalNumber: item.content.hospitalNumber,
        bedNumber: val,
        time
      }
      Object.assign(state.search, item.content)
      nextTick(() => {
        state.DateSelectionRef.handleInit(true)
        state.DateSelectionRef.clearStep()
        getInOutOptions()
        state.tableRef?.initData()
      })
    }

    // 获取详情
    function getInfo(row) {
      const param = {
        hospitalNumber: state.search.hospitalNumber,
        patientIdent: state.search.patientIdent,
        id: row.id,
        time: row.time,
        isDefaultTime: row.isDefaultTime
      }
      Doc.infoTemp(param).then(({ data }) => {
        const { content } = data
        //  将时间戳改为inter
        data.time = data.time * 1

        // 修改自定义项
        const customOptions = []
        if (content.changeContent && content.changeContent.customOptions) {
          for (const x in content.changeContent.customOptions) {
            if (x) {
              customOptions.push({
                label: x,
                value: content.changeContent.customOptions[x]
              })
            }
          }
          if (customOptions.length == 0) {
            customOptions.push({
              label: '',
              value: ''
            })
          }
          content.changeContent.customOptions = customOptions
        }

        // 修改出量
        content.changeContent &&
          content.changeContent.outIoRecords?.map(res => {
            if (res.suNature) {
              const suNature = JSON.parse(res.suNature)
              for (const key in suNature) {
                suNature[key].forEach(v => {
                  res[v.key] = v.value
                })
              }
            }
          })
        content.fixedContent &&
          content.fixedContent.outIoRecords?.map(res => {
            if (res.suNature) {
              const suNature = JSON.parse(res.suNature)
              for (const key in suNature) {
                suNature[key].forEach(v => {
                  res[v.key] = v.value
                })
              }
            }
          })

        nextTick(() => {
          // change直接替换
          state.changeContent = content.changeContent || cloneDeep(ChangeTemp)
          // fix根据是否整点进行替换
          if (isFix(row.time * 1)) {
            state.fixedContent = content.fixedContent || cloneDeep(FixTemp)
            state.fixedContent.oxygenSaturation =
              content.changeContent?.oxygenSaturation
            state.fixedContent.painIntensity =
              content.changeContent?.painIntensity
          } else {
            const fixedContent = {}
            const FixTempKeys = Object.keys(FixTemp)
            for (const x in content.changeContent) {
              // 将fix需要的参数放入fix里
              // 出入量不放
              if (
                FixTempKeys.includes(x) &&
                x != 'inIoRecords' &&
                x != 'outIoRecords'
              ) {
                fixedContent[x] = content.changeContent[x]
              }
            }
            state.fixedContent = fixedContent
          }
          // 将除了可变和不可变的额外的表单数据存储
          const form = {}
          for (const x in data) {
            if (x && x != 'content') {
              form[x] = data[x]
            }
          }
          form.bedNumber = state.form.bedNumber
          state.form = form
        })
      })
    }

    // 快捷时间点的日期
    function getQuickTimeNode(time) {
      return +new Date(
        `${formatTime(
          state.form.time || new Date(),
          'yyyy-MM-dd'
        )} ${time}:00:00`
      )
    }

    // 切换时间
    function handleDate() {
      nextTick(() => {
        // 先去表格里找一下是否有记录
        const obj = state.tableData.find(res => {
          return state.form.time == res.time * 1
        })
        // 有的话选中行，自动获取详情
        if (obj) {
          state.tableRef.setCurrentRow(obj)
          getInfo(obj)
        } else {
          const time = state.form.time
          // 没有的话，清空表单，新增记录
          state.tableRef.clearSelection()
          state.tableRef.setCurrentRow()
          state.form = Object.assign(cloneDeep(formTemp), {
            time,
            hospitalNumber: state.search.hospitalNumber,
            patientIdent: state.search.patientIdent
          })
          state.fixedContent = cloneDeep(FixTemp)
          state.changeContent = cloneDeep(ChangeTemp)
        }
      })
    }

    // 获取出入量项目
    function getInOutOptions() {
      const param1 = {
          modelCode: 'yx-in',
          hospitalNumber: state.search.hospitalNumber,
          patientIdent: state.search.patientIdent
        },
        param2 = {
          modelCode: 'yx-out',
          hospitalNumber: state.search.hospitalNumber,
          patientIdent: state.search.patientIdent
        }
      Promise.all([Manage.getConfig(param1), Manage.getConfig(param2)]).then(
        ([{ data: data1 }, { data: data2 }]) => {
          const inOptions = [],
            outOptions = []
          for (const x in data1) {
            inOptions.push({
              label: x,
              value: data1[x].itemCode
            })
          }
          for (const x in data2) {
            outOptions.push({
              label: x,
              value: data2[x].itemCode
            })
          }
          state.inOptions = inOptions
          state.outOptions = outOptions
        }
      )
    }

    // 添加出入量项
    function addInOut(paramName) {
      state.changeContent[paramName].push(cloneDeep(inOutTemp))
    }

    // 添加自定义体征项
    function addCustom() {
      state.changeContent.customOptions.push({
        label: '',
        value: ''
      })
    }

    // 删除自己新增的数组对象
    function delArr(arrName, idx) {
      state.changeContent[arrName].splice([idx], 1)
    }

    // 出量性质字典
    function getItemCode(code) {
      if (/out_yly/.test(code)) {
        return 'out_yly'
      }
      return code
    }

    // 多选规则
    function checkSelectSet(row) {
      return row.isDefaultTime ? false : true
    }

    //  表格多选
    function handleSelect(arr, ids) {
      state.selection = ids
    }

    //  保存
    async function save() {
      const fixedContent = cloneDeep(state.fixedContent)
      const changeContent = cloneDeep(state.changeContent)
      state.form.time = +new Date(
        formatTime(state.form.time, 'yyyy-MM-dd HH:mm:ss', 'timestamp')
      )
      // 非整点将fix的参数放进change
      // 出入量不放
      if (!isFix()) {
        const FixTempKeys = Object.keys(FixTemp)
        for (const x in fixedContent) {
          // 将fix需要的参数放入change里
          // 出入量不放
          if (
            FixTempKeys.includes(x) &&
            x != 'inIoRecords' &&
            x != 'outIoRecords'
          ) {
            changeContent[x] = fixedContent[x]
          }
        }
      }
      changeContent.oxygenSaturation = fixedContent.oxygenSaturation
      changeContent.painIntensity = fixedContent.painIntensity
      // 修改自定义项
      const customOptions = {}
      changeContent.customOptions.map(res => {
        if (res.label) {
          customOptions[res.label] = res.value
        }
      })
      changeContent.customOptions = customOptions

      // 修改入量
      changeContent.inIoRecords.map(res => {
        if (!res.realTime) {
          res.realTime = state.form.time
        }
        if (!res.modelCode) {
          res.modelCode = 'yx-in'
        }
        if (!res.ioValue) {
          res.ioValue = 0
        }
      })

      // 修改出量
      changeContent.outIoRecords.map(res => {
        if (!res.realTime) {
          res.realTime = state.form.time
        }
        if (!res.modelCode) {
          res.modelCode = 'yx-out'
        }
        if (!res.ioValue) {
          res.ioValue = 0
        }
        res.suNature = JSON.stringify({
          outDb: [
            {
              key: 'out_db_isColoclyster',
              name: '是否灌肠',
              value: res.out_db_isColoclyster
            },
            {
              key: 'out_db_isArtificial',
              name: '造口/人工肛门',
              value: res.out_db_isArtificial
            },
            {
              key: 'out_db_isIncontinence',
              name: '是否失禁',
              value: res.out_db_isIncontinence
            }
          ],
          outWnrw: [
            {
              key: 'out_wnrw_color',
              name: '颜色',
              value: res.out_wnrw_color
            }
          ]
        })
      })

      const param = {
        ...state.form,
        changeContent
      }
      const axios = [Doc.editTemp(param)]
      if (state.form.isDefaultTime) {
        const arr = [
          // 体温
          {
            obsvCode: 'gcx_t_s',
            obsvName: '体温',
            obsvType: 'xunhuan',
            patientIdent: state.search.patientIdent,
            hospitalNumber: state.search.hospitalNumber,
            recTime: state.form.time,
            dataType: 'struct',
            detail: [
              {
                id: fixedContent.temperatureTypeId,
                dataType: 'enum',
                defaultValue: 'gcx_clgj_ew',
                hospitalNumber: state.search.hospitalNumber,
                patientIdent: state.search.patientIdent,
                obsvCode: 'gcx_clgj',
                obsvName: '测量工具',
                propValue: fixedContent.temperatureType,
                recTime: state.form.time
              },
              {
                id: fixedContent.temperatureId,
                dataType: 'float',
                hospitalNumber: state.search.hospitalNumber,
                patientIdent: state.search.patientIdent,
                obsvCode: 'gcx_T',
                obsvName: 'T',
                propValue: fixedContent.temperature,
                propUnit: '℃',
                recTime: state.form.time
              }
            ]
          },
          // 心率
          {
            id: fixedContent.heartRateId,
            propValue: fixedContent.heartRate,
            obsvCode: 'gcx_ecg_s',
            obsvName: '心率',
            obsvType: 'xunhuan',
            patientIdent: state.search.patientIdent,
            hospitalNumber: state.search.hospitalNumber,
            recTime: state.form.time,
            dataType: 'string'
          },
          // 呼吸
          {
            id: fixedContent.breatheId,
            propValue: fixedContent.breathe,
            obsvCode: 'resp',
            obsvName: '呼吸',
            obsvType: 'xunhuan',
            patientIdent: state.search.patientIdent,
            hospitalNumber: state.search.hospitalNumber,
            recTime: state.form.time,
            dataType: 'integer'
          },
          // 收缩压和舒张压
          {
            obsvCode: 'iabp',
            obsvName: 'IABP',
            obsvType: 'xunhuan',
            patientIdent: state.search.patientIdent,
            hospitalNumber: state.search.hospitalNumber,
            recTime: state.form.time,
            dataType: 'struct',
            detail: [
              {
                id: fixedContent.ibpSId,
                dataType: 'integer',
                defaultValue: '',
                hospitalNumber: state.search.hospitalNumber,
                patientIdent: state.search.patientIdent,
                obsvCode: 'ibpS',
                obsvName: 'ABPS',
                propValue: fixedContent.ibpS,
                propUnit: 'mmHg',
                recTime: state.form.time
              },
              {
                id: fixedContent.ibpDId,
                dataType: 'integer',
                hospitalNumber: state.search.hospitalNumber,
                patientIdent: state.search.patientIdent,
                obsvCode: 'ibpD',
                obsvName: 'ABPD',
                propValue: fixedContent.ibpD,
                propUnit: 'mmHg',
                recTime: state.form.time
              }
            ]
          }
        ]
        axios.push(batchObsRecord(arr))
      }
      await axios
      $message.success('保存成功')
      state.tableRef?.initData(tableData => {
        // 先去表格里找一下该记录
        const obj = tableData.find(res => {
          return state.form.time == res.time * 1
        })
        state.tableRef.setCurrentRow(obj)
        getInfo(obj)
      })
    }

    function handleDel() {
      const param = {
        hospitalNumber: state.search.hospitalNumber,
        patientIdent: state.search.patientIdent,
        ids: state.selection
      }
      Doc.delTemp(param).then(() => {
        $message.success('删除成功')
        state.tableRef?.initData()
        state.selection = []
      })
    }

    // 关闭
    function close() {
      if (state.form.bedNumber) {
        // 清空表单
        state.tableRef.clearSelection()
        state.tableRef.setCurrentRow()
        state.form = Object.assign(cloneDeep(formTemp), {
          time: +new Date()
        })
        state.tableRef?.clearTableData()
        state.fixedContent = cloneDeep(FixTemp)
        state.changeContent = cloneDeep(ChangeTemp)
        emit('refresh')
      }
      state.visible = false
    }

    onMounted(() => {
      getBedOptions()
    })

    return {
      ...toRefs(state),
      isFix,
      initData,
      handleBed,
      getQuickTimeNode,
      handleDate,
      addInOut,
      addCustom,
      getItemCode,
      delArr,
      handleSelect,
      handleDel,
      checkSelectSet,
      getInfo,
      save,
      close
    }
  }
})
</script>
<style scoped lang="scss">
::v-deep {
  .el-dialog {
    .el-dialog__header {
      text-align: center;
    }

    .el-dialog__body {
      padding: 10px 60px 20px;
    }
  }
}

.header {
  padding: 10px;
}

.box {
  display: grid;
  grid-template-columns: 360px auto;

  & > div {
    padding: 20px;
    border: 1px solid #e6ebf4;
  }
}

.form {
  flex: 1;
  border-left: 1px solid #e6ebf4;
  margin-left: -1px;
}

:deep {
  .el-radio-group {
    margin-top: -3px;
    margin-left: 20px;
    padding: 8px 13px 4px;
    border: 1px solid #f0f0f0;

    .el-radio__input.is-checked .el-radio__inner {
      border-color: #165dff;
      background: #165dff;
    }

    .el-radio__input.is-checked + .el-radio__label {
      color: #165dff;
    }

    .el-radio {
      color: #303133;
      font-size: 16px;

      .el-radio__label {
        padding-left: 2px;
      }
    }
  }

  .el-input-group {
    .el-input__inner {
      border-right: none;
    }
  }

  .el-input__inner {
    border-radius: 0;
    border: 1px solid #f0f0f0;
  }

  .el-input-group__append {
    padding: 0 10px;
    border: 1px solid #f0f0f0;
    color: #7d869d;
    background: #fff;
    border-left: none;
    border-radius: 0;
    font-size: 14px;
  }
}

.content {
  margin-top: -1px;
  margin-bottom: 20px;
  padding: 10px 10px 0;
  min-height: 40px;
  border: 1px solid #f0f0f0;

  &.pb-10 {
    padding-bottom: 10px;
  }
}

.el-icon-circle-plus,
.el-icon-delete {
  font-size: 20px;
  color: #43a359;
  cursor: pointer;
  vertical-align: middle;
  padding-left: 10px;
}

.el-icon-delete {
  color: gray;
}

p {
  background: #f0f0f0;
  margin: 0;
  padding: 12px 13px;
  font-size: 16px;
  border: 1px solid #f0f0f0;
}

.w-105 {
  width: 105px;
}

.w-140 {
  width: 140px;
}

.w-300 {
  width: 360px;
}

.w-700 {
  width: 700px;
}

.ml-26 {
  margin-left: 26px;
}

.ml-134 {
  margin-left: 134px;
}

.inline-block {
  display: inline-block;
}

.img {
  margin: 0 10px;
  width: 20px;
  vertical-align: sub;
  cursor: pointer;

  &.add {
    margin: 0 10px 0 0;
  }
}
</style>
